<template>
    <div class="container">
        <NavigationBar 
            :map_type="map_type"
            :map_name="map_name"
            class="naviBarContainer"/>
        <div id = 'map'></div>
        <PageIndex class="pageIndex" 
            :jumpTo="jumpTo" :totalPages="totalPages" 
            :currentPage="currentPage" :smallStyle="smallStyle" />
        <div class="Reset" @click.stop="resetRotation">
             <img src="../assets/reset.png">
        </div>
    </div>
</template>

<script>
import Map from "ol/Map";
import View from "ol/View";
import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
//引入子组件
import NavigationBar from'./NavigationBar';
import PageIndex from './PageIndex';
import _Global from './Global';
export default {
    name:'MapContainer',
    components:{
        NavigationBar,
        PageIndex
    },
    data() {
        return {
            vMap:null,
            vLayer:null,
            /** 网页路由携带参数 */
            containerHeight: '667px',  // 手机屏幕高度
            containerWidth: '375px',   // 手机屏幕宽度
            map_type: '世界风貌',       // 专题名称
            totalPages: 100,           // 专题下图幅数量
            map_name: '卫星影像',       // 图幅名称
            currentPage: 2,            // 图幅所在专题索引
            unique_id: '2-3',           // 图幅对应切片名称(以图片名命名)
            share:false,               // 是否处于分享状态
            /** 是否使用小型分页样式 */
            smallStyle: true           // 根据手机的宽度决定
        }
    },
    created() {
        //读取路由中携带的参数
    },
    mounted() {
        //启用加载动效
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        //设置与手机屏幕尺寸相对应的画布
        this.$el.style.height = this.containerHeight;
        this.$el.style.width = this.containerWidth;
        this.$el.style.border = '0px solid red';
        //加载地图切片服务
        this.initMap(this.unique_id);
        console.log(_Global.catalog);
        loading.close();
    },
    methods:{
       initMap:function(unique_id){
           // 地图切片服务URL
           //let tileUrl = `https://51carto.com/${unique_id}/{z}/{x}/{-y}.png`;
           let tileUrl = `http://47.96.162.249:8087/imgs/${unique_id}/{z}/{x}/{-y}.png`;
           let view = new View({
               projection: "EPSG:4326",
               center: [-57.2, 0],
               zoom: 0,
               minZoom: 0,
               maxZoom: 6,
               rotation: Math.PI/2
            })
            this.vLayer = new TileLayer({
                source: new XYZ({
                    url: tileUrl,
                    tileSize: 256,
                    projection: "EPSG:4326",
                    maxResolution: 180 / 256,
                    wrapX: true
                })
            })
            this.vMap = new Map({
               target: 'map',
               layers: [this.vLayer],
               view: view
            })
       },
       // 刷新页面
       jumpTo(index){
           console.log(parseInt(index));
       },
       // 将地图恢复至竖直状态
       resetRotation:function(){
           let view = this.vMap.getView();
           view.setRotation(Math.PI/2);
       }
    }
}
</script>

<style scoped>
.container{
    position: absolute;
    top:0px;
}
.naviBarContainer{
    height: 4%;
    position: absolute;
    top:4%;
}
#map{
    position: absolute; 
    top:10%;
    bottom:13%; 
    right:10px; 
    left:10px;
    border:0px solid green;
}
.pageIndex{
    position: absolute;
    top:91%;
    left: 50%;
    transform: translate(-50%, 0);
}
.Reset{
    position:absolute;
    top:83%;
    right:20px;
}
.Reset img{
    height:20px;
    width:20px;
}
/* 深度作用选择器 */
::v-deep .ol-rotate {
    display: none;
}
</style>